<template>
  <!-- 标注物体列表 -->
  <el-popover placement="top-end" width="450" :visible-arrow="false" trigger="click" v-model="annotationListVisible">
    <div style="height: 300px; overflow: auto">
      <el-table
        max-height="280"
        :data="data"
        @selection-change="handleSelectionChange"
        @row-click="onAnnotationRowClick"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="类别" align="left" width="120px" prop="name" :formatter="nameFormatter" />
        <el-table-column
          label="格式"
          align="center"
          width="80px"
          prop="fileType"
          :formatter="(row) => (row.fileType == '2d' ? '二维' : '三维')"
        />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-document" @click="handleAnnotationDetails(scope.row)"
              >详细</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleAnnotationDelete(scope.row)"
              v-hasPermi="['mark:qaresult:remove']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-button slot="reference" type="text" class="color-name-btn">标注列表</el-button>
  </el-popover>
</template>

<script>
import { ActionStat } from '../components/MImageMarker/data/annotation.js'

export default {
  name: 'AnnotationListBox',

  props: {
    data: {
      type: Array,
      required: true,
    },
    selected: {
      type: Object,
      default: null,
    },
    updateProperty: {
      type: Function,
    },
  },
  data() {
    return {
      annotationListVisible: false,

      filter: {},
    }
  },
  computed: {
    selectedItems: {
      get() {
        return []
      },
      set() {
        this.$emit('selected-change')
      },
    },
  },
  methods: {
    nameFormatter(row) {
      // console.log(val)
      return row.name
    },

    onAnnotationRowClick(row, column, event) {
      this.$emit('selected-change', row)
    },

    handleSelectionChange(selection) {
      console.log(selection)
      const ids = selection.map((item) => item.mMarkAnnotationId)
      this.$emit('selection-change', ids, selection, this.filter)
    },

    handleAnnotationDelete(row) {
      this.$confirm('该操作将删除选中的记录，且不可恢复。确定删除?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          const data = { ...row, status: ActionStat.DELETE }
          this.$emit('update', data)
        })
        .catch(() => {})
    },
    handleAnnotationDetails(row) {
      const callback = this.updateProperty
      if (callback && callback instanceof Function) {
        callback(row)
      }
    },
  },
}
</script>

<style lang="sass" scoped></style>
